
//固定常量
$height = 100vh
$width = 1920
$min-width = 1200px

$color = #00eaff

.home
  width 100%
  height 100%
  background url('../assets/img/bg.jpg') center no-repeat
  background-size 100% 100%
.header
  width 100%
  height 124px
  background url('../assets/img/home-title.png') center top no-repeat
  background-size 100% 100% 
  text-align center
  h1 
    color $color
    font-size 32px
    line-height 50px
    letter-spacing 2px
  p 
    color #ffffff
    font-size 0
    margin-top 10px
    span 
      font-size 16px  
      margin 0 10px
.container
  position relative
  width 100%
  height calc(100% - 124px) 
  font-size 0
.left, .right 
  position absolute
  bottom 0
  // top -(45 / 1080) * 100vh
  width (497 / $width )* 100% 
  // height calc(100% + (45/980)*100% )
  height (984 / 1080) * 100vh
  padding 0 14px

    
// 公共标题
.item-title
  font-size: 16px
  color: #00ffff

.left
  left 0
  padding-right 20px
  .left-item
    position relative
    padding-left 10px
.resoure-item
  height (190 / 984) * 100%
  .item-title 
    margin-bottom 5px
  .title
    color #ffffff
    font-size 14px
    padding 10px 0
  .num 
    font-size 0
    vertical-align middle
    i 
      display inline-block
      width 29px
      height 34px
      line-height 34px
      font-size 16px
      color #00fff6
      background url('../assets/img/font-bg.png') center no-repeat
      background-size 100% 100%
      text-align center
      margin-right 5px
.person-item 
  height (230 / 984) * 100%
  padding 15px 0 20px
  border-top 1px solid #006294
  border-bottom 1px solid #006294
  .li 
    display inline-block
    width 50%
    height 50px
    padding-left (30 / 462) * 100%
    margin-top (30 / 1080) * 100vh
    box-sizing border-box
    &>div 
      display inline-block
      height 100%
      vertical-align: middle
  .icon 
    width 44px
    margin-right 8px
  .icon1 
    background url('../assets/img/person-icon1.png') center no-repeat
    background-size 100% 100%
  .icon2 
    background url('../assets/img/person-icon2.png') center no-repeat
    background-size 100% 100%
  .icon3 
    background url('../assets/img/person-icon3.png') center no-repeat
    background-size 100% 100%
  .icon4 
    background url('../assets/img/person-icon4.png') center no-repeat
    background-size 100% 100%
  .text 
    p 
      color #00ffff
      font-size 22px
      margin-bottom 12px 
    span 
      color #ffffff
      font-size 14px 
.map-item 
  height (564 / 984)*100%
  .item-title 
    padding-top (20 / 564)*100%
  .item-map
    width (432 / 460) * 100%
    height (510 / 564) * 100%
    background url('../assets/img/left-map.png') center no-repeat
    background-size 100% 100%

.right
  right 0
  padding-left 20px
  .title 
    color #ffffff
    font-size 14px
  .right-top 
    height (580 / 984) * 100%
  .item-total 
    position relative
    height (138 / 584) * 100%
    padding 20px 0
    border-top 1px solid #24316a
    border-bottom 1px solid #24316a
    .num-wrapper 
      display inline-block
      width calc(100% / 3)
      margin-top 20px
      text-align center
      vertical-align middle
      p 
        font-size 20px
        margin-bottom 8px
      span 
        color #ffffff
        font-size 14px
      .num1 
        color #00ff12
      .num2 
        color #f0ff00
      .num3 
        color #00ffff
  .item-pie 
    height (364 / 584) * 100%
    .title 
      padding-top 20px
  .right-bottom 
    height (404 / 984) * 100%
    border-top 1px solid #006294
    .item-title 
      padding-top 10px


.center
  width (926 / $width ) * 100%
  height 100%
  margin 0 auto
.center-top
  position relative
  height (575 / 956) * 100%
  background url('../assets/img/center-top-border.png') center no-repeat
  background-size 100% 100%
  .top-container 
    position absolute
    top 50%
    left 50% 
    transform translateX(-50%) translateY(-50%)
    width (868 / 926) * 100%
    height (527 / 575) * 100%
    background url('../assets/img/center-top-bg.png') center no-repeat
    background-size 100% 100%
  h3 
    width (353/956) * 100%
    height (45/575) * 100%
    font-size 20px
    color #00ffff
    line-height 30px
    background url('../assets/img/center-title.png') center no-repeat
    background-size 100% 100%
    margin 0 auto
    text-align center
  .search-wrapper
    position relative
    width (830 / 868) * 100%
    height 36px
    margin 20px auto 0
  .list-item 
    width (830 / 868) * 100%
    .item-wrapper
      display inline-block 
      width 20%
      height (140 / 310) * 100%
      text-align center
      margin-top 30px
    .item-icon 
      position relative
      display inline-block
      width 96px
      height 96px
      background url('../assets/img/icon-nav.png') center no-repeat
      background-size 100% 100%  
    .text 
      color #ffffff
      font-size 14px  
      margin-top 12px
    .icon 
      position absolute
      top 50%
      left 50%
      transform translateX(-50%) translateY(-50%)
      width 44px
      height 30px
    .icon 
      background url('../assets/img/icon.png') center no-repeat
      background-size 100%  
  .btn-wrapper
    width 100%
    height 26px
    margin-top 14px
    text-align center
    .btn-top 
      width (94 / 830) * 100%
      height 100%
      color #fff
      margin 0 15px
      background-color rgba(0,180,255,0.38)
      border 1px solid #00bffe
      border-radius 4px
      cursor pointer
    .btn-top.disabled
      color #00cbff
      background-color rgba(0,180,255,0.15)
      cursor not-allowed

.center-bottom
  height (344 / 956) * 100%
  background url('../assets/img/center-bottom-bg.png') center no-repeat
  background-size 100% 100%
  margin-top (24 / 956) * 100%
  .item-title
    line-height 40px
    text-align center


@media screen and (max-height: 900px)
  .header
    height 100px
    h1 
      font-size: 28px 
      line-height: 45px
    p 
      margin-top: 5px  
  .container 
    height: calc(100% - 100px)   
  .resoure-item 
    .num i 
      width 26px
      height 30px
      line-height 30px
  .center-top
    .list-item 
      .item-icon 
        width 92px
        height 92px
@media screen and (max-height: 768px)
  .header
    height 80px
    h1 
      font-size 22px
      line-height: 36px
    p
      margin-top 5px
      vertical-align: midddle
      span 
        font-size 14px  
  .container 
    height calc(100% - 80px)
  // left
  .resoure-item 
    .item-title 
      margin-bottom 0
    .title 
      padding 8px 0
    .num i 
      width 20px
      height 24px
      line-height 25px
      font-size 14px
  .person-item 
    padding 10px 15px
    .li 
      margin-top 1.8vh
    .icon 
      width 40px
    .text 
      p 
        font-size 18px
        margin-bottom 14px
  .center-top
    .search-wrapper 
      height 30px
      margin-top 14px
    .list-item 
      .item-wrapper 
        margin-top 20px
      .item-icon 
        width 80px
        height 80px
    .btn-wrapper 
      margin-top 10px
  .right 
    .radio-wrapper
      margin: 18px 0 14px 
    .item-total 
      padding 15px 0 
      .num-wrapper 
        margin-top 15px
        p 
          font-size 18px  
@media screen and (max-device-height: 768px)
  .person-item 
    padding 10px
    